<script setup>
    import { inject, onMounted } from 'vue'
    import { getIrrigationWaterRecords } from '@/api/irrigate'
    import ContentCard from '../../../components/ContentCard.vue'

    const props = defineProps({
        pumpName: {
            type: String,
            default: ''
        }
    })

    let params = $ref({
        pageNo: 1,
        pageSize: 20,
        pumpName: props.pumpName
    })

    onMounted(() => {
        getList()
    })

    // 获取列表
    let resData = $ref([])
    let totalCount = $ref(0)
    let dataLoading = $ref(false)
    const getList = () => {
        dataLoading = true
        getIrrigationWaterRecords(params).then(res => {
            dataLoading = false
            if(res.success){
                let { records, total } = res.result
                resData = records
                totalCount = total
            }
        })
    }

    // 分页
    const handleCurrentChange = (page) => {
        params.pageNo = page
        getList()
    }

    // 搜索
    const handleSearch = () => {
        params.pageNo = 1
        getList()
    }

</script>

<template>
    <content-card :showBack="false">
        <template #currentTitle>
            <div class="text active">井取水记录查询</div>
        </template>

        <template #filter>
            <div class="flex-center">
                <el-input 
                    clearable
                    class="ml10"
                    v-model="params.pumpName"
                    placeholder="请输入机井名称"
                ></el-input>
                <el-button 
                    class="ml10"
                    type="primary"
                    @click="handleSearch()"
                >
                    查询
                </el-button>
            </div>

        </template>

        <div class="project-list-wrap list-card-bg">
            <el-scrollbar class="project-list-scrollbar">
                <ul class="list-head">
                    <li class="index">序号</li>
                    <li class="name">机井名称</li>
                    <li class="area">监控区域</li>
                    <li class="nickname">用水户名</li>
                    <li class="type">IC卡卡号</li>
                    <li class="code">电话号码</li>
                    <li class="start-time">开泵时间</li>
                    <li class="end-time">关泵时间</li>
                    <li class="flow">本次流量(m²)</li>
                    <li class="electric">本次用电量(kwh)</li>
                    <li class="area">A相电压</li>
                    <li class="area">B相电压</li>
                    <li class="area">C相电压</li>
                    <li class="area">A相电流</li>
                    <li class="area">B相电流</li>
                    <li class="area">C相电流</li>
                </ul>
                
                <el-scrollbar class="list-warp" v-loading="dataLoading">
                    <ul class="list-item" v-for="(item, index) in resData" :key="index">
                        <li class="index">{{ index + 1 }}</li>
                        <li class="name" :title="item.pumpName">{{ item.pumpName }}</li>
                        <li class="area">{{ item.districtName }}</li>
                        <li class="nickname">{{ item.waterUser }}</li>
                        <li class="type">{{ item.cardNumber }}</li>
                        <li class="code">{{ item.phone }}</li>
                        <li class="start-time">{{ item.startPumpTime }}</li>
                        <li class="end-time">{{ item.endPumpTime }}</li>
                        <li class="flow">{{ item.flow }}</li>
                        <li class="electric">{{ item.electricity }}</li>
                        <li class="area">{{ item.avoltage }}</li>
                        <li class="area">{{ item.bvoltage }}</li>
                        <li class="area">{{ item.cvoltage }}</li>
                        <li class="area">{{ item.acurrent }}</li>
                        <li class="area">{{ item.bcurrent }}</li>
                        <li class="area">{{ item.ccurrent }}</li>
                    </ul>
    
    
                    <el-pagination 
                        class="mt20" 
                        background 
                        layout="prev, pager, next" 
                        :total="totalCount" 
                        :page-size="params.pageSize"
                        :hide-on-single-page="true"
                        @current-change="handleCurrentChange"
                    />
    
                </el-scrollbar>
            </el-scrollbar>
        </div>
    </content-card>
</template>

<style lang="less" scoped>
    .project-list-wrap{
        margin: 0 45px;

        li{
            display: inline-block;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        
        .index{
            width: 80px;
            text-align: center;
        }

        .name{
            width: 220px;
            margin-left: 10px;
        }

        .area, .nickname, .type{
            width: 90px;
            margin-left: 10px;
            text-align: center;
        }

        .code{
            width: 120px;
            margin-left: 10px;
        }

        .start-time, .end-time{
            width: 160px;
            text-align: center;
            margin-left: 10px;
        }

        .flow, .electric{
            width: 140px;
            text-align: center;
            margin-left: 10px;
        }


        .list-warp{
            height: 600px;
        }

        .project-list-scrollbar{
            width: 1400px;
            overflow-y: hidden;

            .list-head, .list-warp{
                width: 2000px;
            }
        }
    }
</style>